{extend name="index_form" /}

{block name="index_form-link"}
{__block__}
<style>
  #file {
    position: absolute;
    width: 16rem;
    height: 4rem;
    opacity: 0;
    z-index: 99;
    background-color: bisque;
    cursor: pointer;
  }

  #file:hover+.file_box {
    background-color: bisque;
  }

  .file_box {
    width: 16rem;
    text-indent: 0.5rem;
    color: black;
    background-color: white;
    transition: background-color 0.15s;
  }
</style>
{/block}

{block name="form"}
<form action="{:url('index/user/registerEvent')}" method="POST" class="right_form" id="right_form"
  enctype="multipart/form-data">
  <div>
    <input autocomplete="off" type="text" name="username">
    <div class="changeinput">Username</div>
  </div>
  <div>
    <input type="password" name="password">
    <div class="changeinput">Password</div>
  </div>
  <div class="post">
    <input id="file" type="file" name="file" value="file" />
    <div class="file_box" class="changeinput">Headshot</div>
  </div>
  <div class="post">
    <input type="email" placeholder="Email" name="email">
    <input type="submit" value="Sign" class="submit">
  </div>
</form>
{/block}